<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<%@ taglib prefix="s" uri="/struts-tags"%>

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
      html { height: 100% }
      body { height: 100%; margin: 0; padding: 0 }
      #map_canvas { height: 50%; width: 50% }
      
    </style>
    <script type="text/javascript"
      src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDVhT1iwN0UYhxgatDCLio7gVla1NTZNFM&sensor=false">
    </script>
    <script type="text/javascript"
      src="js/jquery.min.js">
    </script>
    
   
    <script type="text/javascript" src="js/trackvehicle.js"></script>
    
    <title>Vehicle Tracking System</title>
      
  </head>
  <body>
	  <h1>Vehicle Tracking System</h1>
	  
	 <div id="controls">
	  <s:select label="Vehicle ID" 
		headerKey="-1" headerValue="Select VehicleID"
		list="vehicleIDList" 
		name="vechicleIDList" id="vechicleid_dropdwn" />
		
	  <button type="button" onclick="initialize()">Submit</button>
	  <div id="distance"></div>
	  <div id="speed"></div>
	  <div id="status"></div>
	</div>
    <div id="map_canvas" style="width:100%; height:100%"></div>
  </body>
</html>